<template>
	<view class="page">
		<image src="../../static/img/house/ok.png" class="ok" mode="widthFix">
			<view class="top"> <span>添加成功</span>
				<p>查看小区行情解读 <i></i></p>
			</view>
			<view class="main">
				<view class="msg">继续完善房屋信息，即可查看我家估价</view>
				<view class="box">
					<view class="red">*</view>
					<view class="name">居室</view>

					<picker mode="multiSelector" :range="cityList" :value="cityIndex" @change="bindCityChange"
						class="input">
						<view class="uni-input" v-if="form.room || form.hall || form.toilet">
						{{form.room?form.room+'室':''}}
						{{form.hall?form.hall+'厅':''}}
						{{form.toilet?form.toilet+'卫':''}}
						</view>
						<view class="uni-input input_placeholder" v-else>请选择户型信息</view>
					</picker>

					<!-- 				<picker @change="bindPickerChange" :value="index" :range="array"  class="input">
					<view class="uni-input" v-if="index">{{array[index]}}</view>
					<view class="uni-input input_placeholder" v-else>请选择户型信息</view>
				</picker> -->
					<i class="ico"></i>
				</view>

				<view class="box">
					<view class="red">*</view>
					<view class="name">房屋面积</view>
					<input type="number" v-model="form.square" placeholder="请输入面积" class="input"
						placeholder-class="input_placeholder">
					<view class="unit">m²</view>
				</view>

				<view class="box">
					<view class="red">*</view>
					<view class="name">楼栋楼层</view>
					<view class="clearh"></view>
					<input type="text" placeholder="请输入" v-model="form.builtName" class="input input_layout_left"
						placeholder-class="input_placeholder">
					<view class="span">栋</view>
					<input type="text" placeholder="请输入" v-model="form.roomNo" class="input input_layout_right"
						placeholder-class="input_placeholder">
					<view class="span">门牌号</view>
				</view>

				<view class="tag">
					<p>装修类型</p>
					<span :class="form.deliveryStandard=='毛坯'?'active':''" @click="_deliveryStandard('毛坯')">毛坯</span>
					<span :class="form.deliveryStandard=='简装'?'active':''" @click="_deliveryStandard('简装')">简装</span>
					<span :class="form.deliveryStandard=='清水'?'active':''" @click="_deliveryStandard('清水')">清水</span>
					<span :class="form.deliveryStandard=='精装'?'active':''" @click="_deliveryStandard('精装')">精装</span>
				</view>

				<view class="tag">
					<p>额外面积</p>
					<span :class="form.otherArea=='有'?'active':''" @click="_otherArea('有')">有</span>
					<span :class="form.otherArea=='无'?'active':''" @click="_otherArea('无')">无</span>
					<span :class="form.otherArea=='不清楚'?'active':''" @click="_otherArea('不清楚')">不清楚</span>
				</view>

				<view class="box box_half" v-if="form.otherArea=='有'">
					<view class="name">花园面积</view>
					<input type="number" v-model="form.gardenArea" placeholder="请输入" class="input"
						placeholder-class="input_placeholder">
					<view class="unit">m²</view>
				</view>

				<view class="box box_half box_half_right" v-if="form.otherArea=='有'">
					<view class="name">阁楼面积</view>
					<input type="number" v-model="form.atticArea" placeholder="请输入" class="input"
						placeholder-class="input_placeholder">
					<view class="unit">m²</view>
				</view>

				<view class="box box_half" v-if="form.otherArea=='有'">
					<view class="name">露台面积</view>
					<input type="number" v-model="form.balconyArea" placeholder="请输入" class="input"
						placeholder-class="input_placeholder">
					<view class="unit">m²</view>
				</view>

				<view class="box box_half box_half_right" v-if="form.otherArea=='有'">
					<view class="name">地下室面积</view>
					<input type="number" v-model="form.basementArea" placeholder="请输入" class="input"
						placeholder-class="input_placeholder">
					<view class="unit">m²</view>
				</view>




				<view class="bt" @click="_save()">立即估价</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityIndex: undefined,
				cityList: [
					['请选择几室', 0, 1, 2, 3, 4, 5, 6],
					['请选择几厅', 0, 1, 2, 3, 4, 5, 6],
					['请选择几卫', 0, 1, 2, 3, 4, 5, 6],
				],


				form: {
					"srid": "", //所在小区id
					"room": "", //室
					"hall": "", //厅
					"toilet": "", //卫
					"square": '', //房屋面积
					"builtName": '', //楼栋名称
					"roomNo": '', //门牌号
					"deliveryStandard": '', //装修类型
					"otherArea": '', //有无额外面积   有 无 不知道
					"gardenArea": '', //花园面积
					"atticArea": '', //阁楼面积
					"balconyArea": '', //露台面积
					"basementArea": '' //地下室面积
				}

			}
		},
		onLoad(e) {
			let that = this;
			console.log(e.srid);
			that.form.srid = parseInt(e.srid)
			that.form.builtName = e.builtName
			that.form.roomNo = e.roomNo
		},
		methods: {
			//保存
			_save() {
				if (!this.form.room) {
					uni.showToast({
						title: "请选择户型信息",
						icon: 'none'
					})
					return
				}
				if (!this.form.square) {
					uni.showToast({
						title: "请输入房屋面积",
						icon: 'none'
					})
					return
				}


				this.form.basementArea = parseFloat(this.form.basementArea)
				this.form.balconyArea = parseFloat(this.form.balconyArea)
				this.form.atticArea = parseFloat(this.form.atticArea)
				this.form.gardenArea = parseFloat(this.form.gardenArea)
				this.form.square = parseFloat(this.form.square)

				let that = this
				that.api.post('mhc/add', that.form).then(res => {
					let temp = JSON.parse(res)
					if (temp) {
						uni.showToast({
							title: "提交成功",
							icon: 'none'
						})
						setTimeout(function() {
							that._navigateTo('/pages/house/server?srid=' + that.form.srid)
						}, 1500)
					}
					console.log(res);
				})

			},
			// 有无额外面积
			_otherArea(e) {
				this.form.otherArea = e
				if(e!='有'){
					this.form.gardenArea =""
					this.form.atticArea =""
					this.form.balconyArea =""
					this.form.basementArea=""
				}
			},
			// 装修类型
			_deliveryStandard(e) {
				this.form.deliveryStandard = e
			},
			// 下拉选择
			bindCityChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.cityIndex = e.target.value
				if (this.cityList[0][this.cityIndex[0]] != '请选择几室') {
					this.form.room = this.cityList[0][this.cityIndex[0]]
				}else{
					this.form.room = 0
				}

				if (this.cityList[1][this.cityIndex[1]] != '请选择几厅') {
					this.form.hall = this.cityList[1][this.cityIndex[1]]
				}else{
					this.form.hall = 0
				}

				if (this.cityList[2][this.cityIndex[2]] != '请选择几卫') {
					this.form.toilet = this.cityList[2][this.cityIndex[2]]
				}else{
					this.form.toilet = 0
				}


				console.log(this.form);
			},


			// 选择户型信息
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},

			// 跳页
			_navigateTo(e) {
				uni.navigateTo({
					url: e
				});
			},

		}
	}
</script>

<style>
	.tag {
		width: 662rpx;
		padding: 0 0 0;
		height: auto;
		display: block;
		float: left;
		margin: 32rpx 0 0 24rpx;
	}

	.tag p {
		width: 100%;
		padding: 0 0 0;
		height: auto;
		display: block;
		float: left;
		margin: 0 0 16rpx 0;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 40rpx;
		display: block;
		float: left;
	}

	.tag span {
		width: auto;
		height: 80rpx;
		background: #F6F6F6;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		padding: 0 53rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 80rpx;
		margin: 0 16rpx 16rpx 0;
		display: block;
		float: left;
		min-width: 98rpx;
		text-align: center;
	}

	.tag span.active {
		background: rgba(254, 87, 0, 0.05);
		color: #FE5700;
		font-weight: bold;
	}




	.box {
		width: 638rpx;
		padding: 0 0 32rpx;
		height: auto;
		display: block;
		float: left;
		margin: 32rpx 24rpx 0;
		border-bottom: 1rpx solid rgba(190, 190, 190, 0.5);
	}

	.name {
		width: 180rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 40rpx;
		display: block;
		float: left;
	}

	.span {
		width: auto;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 40rpx;
		display: block;
		float: left;
	}

	.input {
		width: 400rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000;
		line-height: 40rpx;
		display: block;
		float: left;
	}

	.unit {
		width: 38rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 40rpx;
		display: block;
		float: right;
	}

	.input_placeholder {
		color: #BEBEBE;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
	}

	.ico {
		width: 10rpx;
		height: 16rpx;
		display: inline-block;
		float: right;
		margin: 15rpx 0 0 12rpx;
		background: url(../../static/img/house/okright.png) no-repeat;
		background-size: 100%;
	}

	.clearh {
		width: 100%;
		height: 1rpx;
		display: block;
		float: left;
		margin: 0 0 25rpx;
	}

	.input_layout_left {
		width: 210rpx;
		margin-right: 20rpx;
	}

	.input_layout_right {
		width:190rpx;
		margin: 0 20rpx 0 80rpx;
	}

	.bt {
		width: 638rpx;
		height: 88rpx;
		background: #FE5700;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		display: block;
		float: left;
		margin: 32rpx 24rpx;
	}

	.red {
		width: auto;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FF0000;
		line-height: 40rpx;
		display: block;
		float: left;
		margin: 0 0 0 -10rpx;
	}

	.box_half {
		width: 278rpx;
	}

	.box_half .input {
		width: 230rpx;
	}

	.msg {
		width: 638rpx;
		height: 76rpx;
		background: rgba(254, 87, 0, 0.05);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 1rpx solid #FE5700;
		text-align: left;
		box-sizing: border-box;
		padding: 0 18rpx 0;
		line-height: 76rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		display: block;
		float: left;
		margin: 34rpx 0 6rpx 24rpx;
	}

	.box_half .name {
		margin-bottom: 28rpx;
	}

	.main {
		width: 686rpx;
		height: auto;
		display: block;
		float: left;
		margin: 0 32rpx 146rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.box_half_right {
		float: right;
	}

	page {
		background-color: #F6F6F6;
	}

	.ok {
		width: 116rpx;
		height: 116rpx;
		display: block;
		float: left;
		margin: 20rpx 0 18rpx 318rpx;
	}

	.top {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		text-align: center;
	}

	.top span {
		width: 100%;
		display: block;
		float: left;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		margin: 0 0;
	}

	.top p {
		width: 100%;
		display: block;
		float: left;
		height: 36rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		line-height: 36rpx;
		color: #FE5700;
		margin: 10rpx 0 46rpx;
	}


	.top i {
		width: 10rpx;
		height: 16rpx;
		display: inline-block;
		margin: 15rpx 0 0 12rpx;
		background: url(../../static/img/house/yellow.png) no-repeat;
		background-size: 100%;
	}
</style>